<template>
  <a-upload
    :multiple="true"
    :file-list="fileList"
    :before-upload="beforeUpload"
    :disabled="isShow"
    :remove="handleFileRemove"
    @change="handleChange"
    accept=".docx, .doc, .xlsx, .xls, .pdf, .jpeg, .png"
  >
    <a-button v-if="!isShow">
      <a-icon type="upload"/>
      上传文件
    </a-button>
  </a-upload>
</template>

<script>
  import {uploadAction, getAction} from '@/api/manage'

  export default {
    name: 'ZUpload',
    props: ['fileid', 'isShow'],
    data() {
      return {
        saveFiles: '/sys/common/sjUpload',
        getFiles: '/sjzyzhgl/sjFileInfo/commonFileInfo',
        removeFilse: '/sjzyzhgl/sjFileInfo/removeAffix',
        fileList: [
          // {
          //   uid: '-1',
          //   name: 'xxx.png',
          //   status: 'done',
          //   url: 'http://www.baidu.com/xxx.png',
          // },
        ],
      }
    },
    watch: {
      fileid: {
        handler: function (val) {
          console.log('flie', val)
          this.fileList = []
          this.getFile()
        },
        immediate: true,
      },
    },

    methods: {
      beforeUpload(file, fileList) {
        // return false
        if (file.size / 1024 / 1024 < 50) {
          return false
        } else {
          this.$message.error('上传的文件不能大于50M，请删除文件重新上传')
          return true
        }
      },
      handleChange(info) {
        let fileList = [...info.fileList]
        fileList = fileList.map((file) => {
          if (file.response) {
            file.url = file.response.url
          }
          return file
        })
        this.fileList = fileList
      },
      saveFile(path) {
        const {fileList} = this
        if (fileList.length > 0) {
          let formData = new FormData()
          fileList.forEach((file) => {
            if (file.originFileObj) {
              formData.append('files', file.originFileObj)
            }
          })
          formData.append('biz', path)
          formData.append('id', this.fileid || '')
          uploadAction(this.saveFiles, formData).then((res) => {
            if (res.success) {
              this.$emit('uploadFile', res.result.id)
            } else {
              this.$emit('uploadFile')
            }
          })
        } else {
          this.$emit('uploadFile')
        }
      },
      handleFileRemove(file) {
        console.log(file)
        if (file.status) {
          getAction(this.removeFilse, {id: file.uid}).then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              return true
            } else {
              this.$message.error(res.message)
              return false
            }
          })
        } else {
          return true
        }
      },
      setFile(fileData) {
        this.fileList = fileData.map((item) => {
          return {
            name: item.fileName,
            uid: item.id,
            status: 'done',
            url: `${window._CONFIG['domianURL']}/sys/common/static/${item.url}`,
          }
        })
        console.log(this.fileList, 'fileList')

      },
      clearFile() {
        this.fileList = []
      },
      getFile() {
        getAction(this.getFiles, {id: this.fileid}).then((res) => {
          if (res.success && res.result) {
            this.fileList = res.result.affixList.map((item, index) => {
              return {
                name: item.fileName,
                uid: item.id,
                status: 'done',
                url: `${window._CONFIG['domianURL']}/sys/common/static/${item.url}`,
              }
            })
          } else {
            console.log(res)
          }
        })
      },
    },
  }
</script>

<style lang="less" scoped>
</style>